//
//  CookbookDetails.swift
//  MyCookbook
//
//  Created by liaokylin on 2024/10/14.
//

import SwiftUI

struct GastronomePanel:View {
    var body: some View {
        HStack{
            Image("5")
                .frame(width: 80,height: 80)
                .clipShape(/*@START_MENU_TOKEN@*/Circle()/*@END_MENU_TOKEN@*/)
            Text("雪域的阳光").bold()
            Spacer()
            Button(action: /*@START_MENU_TOKEN@*/{}/*@END_MENU_TOKEN@*/, label: {
                Text("关注")
                    .foregroundColor(.pink.opacity(0.8))
                    .bold()
                    .frame(width: 60,height: 36)
                    .background(Color.pink.opacity(0.1))
                    .cornerRadius(50)
            })
        }
    }
}


struct CookbookDetails: View {
    @Environment(\.presentationMode) var presentationMode
    @State private var comment:String = ""
    @State private var isPresented:Bool = false
    @State private var scrollOffset: CGFloat = 0
    @State private var needChangeColor:Bool = false
    @State private var isSticky = false  // 记录是否需要吸顶
    @FocusState private var isTextFieldFocused: Bool
    var body: some View {
        NavigationStack{
            ScrollView {
                    VStack{
                        Image("1").resizable().frame(maxWidth:.infinity,maxHeight: 350)
                    }
                    GeometryReader { geometry in
                         Color.clear
                             .onAppear {
                                 self.scrollOffset = geometry.frame(in: .global).minY
                             }
                             .onChange(of: geometry.frame(in: .global).minY) {newValue in
                                 self.scrollOffset = newValue
                                 if self.scrollOffset < 358 {
                                     self.needChangeColor = true
                                 }else{
                                     self.needChangeColor = false
                                 }
                                 print("Scroll offset: \(newValue)")
                             }
                     }.frame(height: 0)
                    VStack(alignment:.leading){
                        Text("超级面包").font(/*@START_MENU_TOKEN@*/.title/*@END_MENU_TOKEN@*/).bold()
                        Text("下厨房评分").font(.subheadline).bold()
                        HStack(alignment:.center){
        
                            Text("8.8").font(.largeTitle)
                                
                        
                            Spacer()
                            VStack{
                                HStack{
                                    Text("好极了").offset(y:7)
                                    ProgressView("", value: 88, total: 100)
                                                  .accentColor(.gray)
                                }.font(.caption2)
                                HStack{
                                    Text("挺好").offset(y:7)
                                    ProgressView("", value: 12, total: 100)
                                                  .accentColor(.gray)
                                }.font(.caption2)
                                HStack{
                                    Text("一般").offset(y:7)
                                    ProgressView("", value: 0, total: 100)
                                                  .accentColor(.gray)
                                }.font(.caption2)
                            }.padding(.horizontal,12)

                        }
                        GeometryReader{ geometry in
                            let offset = geometry.frame(in: .global).minY
                            GastronomePanel()
                                .onChange(of: offset) { newValue in
                                   if newValue <= 0 {
                                       self.isSticky = true
                                   } else {
                                       self.isSticky = false
                                   }
                                }
                 
                        }.frame(height: 80)
                        Text("纯属个人分享，食材用量随意，凭感觉！").bold().padding(.vertical,10)
                        Section(header:Text("用料").font(.title2).bold()) {
                            HStack{
                                Text("虾")
                                Spacer()
                                Text("3斤")
                            }
                            Divider()
                            HStack{
                                Text("鸡蛋")
                                Spacer()
                                Text("3斤")
                            }
                            Divider()
                            HStack{
                                Text("面粉")
                                Spacer()
                                Text("3斤")
                            }
                            Divider()
                            HStack{
                                Text("鸡蛋")
                                Spacer()
                                Text("3斤")
                            }
                            Divider()
                            HStack{
                                Text("鸡蛋")
                                Spacer()
                                Text("3斤")
                            }
                            Divider()
                            HStack{
                                Text("鸡蛋")
                                Spacer()
                                Text("3斤")
                            }
                            Divider()
                            HStack{
                                Text("鸡蛋")
                                Spacer()
                                Text("3斤")
                            }
                            Divider()
                            HStack{
                                Text("鸡蛋")
                                Spacer()
                                Text("3斤")
                            }

                        }
                        Section(header:Text("步骤1")){
                            Image("1").resizable().frame(maxWidth: .infinity)
                            Text("这是一段很长的文字，当文字长度超过视图宽度时，它会自动换行。你不需要手动插入换行符。")
                                     .frame(maxWidth: .infinity)
                        }
                        Section(header:Text("步骤2")){
                            Image("1").resizable().frame(maxWidth: .infinity)
                            Text("这是一段很长的文字，当文字长度超过视图宽度时，它会自动换行。你不需要手动插入换行符。")
                                     .frame(maxWidth: .infinity)
                        }
                        Section(header:Text("步骤3")){
                            Image("1").resizable().frame(maxWidth: .infinity)
                            Text("这是一段很长的文字，当文字长度超过视图宽度时，它会自动换行。你不需要手动插入换行符。")
                                     .frame(maxWidth: .infinity)
                        }
                        Section(header:Text("步骤4")){
                            Image("1").resizable().frame(maxWidth: .infinity)
                            Text("这是一段很长的文字，当文字长度超过视图宽度时，它会自动换行。你不需要手动插入换行符。")
                                     .frame(maxWidth: .infinity)
                        }
                        Section(header:Text("步骤5")){
                            Image("1").resizable().frame(maxWidth: .infinity)
                            Text("这是一段很长的文字，当文字长度超过视图宽度时，它会自动换行。你不需要手动插入换行符。")
                                     .frame(maxWidth: .infinity)
                        }
                    }
                    .padding()
                    .sheet(isPresented: $isPresented, content: {
                        VStack{
                            Spacer()
                            HStack{
                                Spacer()
                                Text("分享给").font(.title2).bold()
                                Spacer()
                                Image(systemName: "xmark")
                                    .onTapGesture {
                                        isPresented.toggle()
                                    }
                            }.padding(.horizontal,10)
                            ScrollView(.horizontal, showsIndicators: false){
                                HStack{
                                    Circle().fill(.green.opacity(0.2)).frame(width: 50,height: 50)
                                    Circle().fill(.green.opacity(0.2)).frame(width: 50,height: 50)
                                    Circle().fill(.green.opacity(0.2)).frame(width: 50,height: 50)
                                    Circle().fill(.green.opacity(0.2)).frame(width: 50,height: 50)
                                    Circle().fill(.green.opacity(0.2)).frame(width: 50,height: 50)
                                    Circle().fill(.green.opacity(0.2)).frame(width: 50,height: 50)
                                    Circle().fill(.green.opacity(0.2)).frame(width: 50,height: 50)
                                }
                            }
                            Spacer()
                            Text("更多操作").font(.title2).bold()
                            ScrollView(.horizontal, showsIndicators: false){
                                HStack{
                                    Circle().fill(.gray.opacity(0.2)).frame(width: 50,height: 50)
                                    Circle().fill(.gray.opacity(0.2)).frame(width: 50,height: 50)
                                    Circle().fill(.gray.opacity(0.2)).frame(width: 50,height: 50)
                                    Circle().fill(.gray.opacity(0.2)).frame(width: 50,height: 50)
                                    Circle().fill(.gray.opacity(0.2)).frame(width: 50,height: 50)
                                    Circle().fill(.gray.opacity(0.2)).frame(width: 50,height: 50)
                                    Circle().fill(.gray.opacity(0.2)).frame(width: 50,height: 50)
                                }
                            }
                        }
                        .presentationDetents([.height(250)])
                    })
                    .navigationBarBackButtonHidden(true)
                    .toolbar{
                        ToolbarItemGroup(placement:.topBarLeading){
                            Image(systemName: "chevron.left").foregroundColor(needChangeColor ? .gray : .white)
                                .onTapGesture {
                                    presentationMode.wrappedValue.dismiss()
                                }
                            if self.isSticky {
                                HStack{
                                    Image("5")
                                        .frame(width: 30,height: 30)
                                        .clipShape(/*@START_MENU_TOKEN@*/Circle()/*@END_MENU_TOKEN@*/)
                                    Text("雪域的阳光")
                                }
                            }
                        }
                
                        ToolbarItemGroup(placement:.topBarTrailing){
                            
                            HStack{
                                if self.isSticky {
                                    Button(action: /*@START_MENU_TOKEN@*/{}/*@END_MENU_TOKEN@*/, label: {
                                        Text("关注")
                                            .foregroundColor(.pink.opacity(0.9))
                                            .bold()
                                            .frame(width: 60,height: 36)
                                            .background(Color.pink.opacity(0.2))
                                            .cornerRadius(50)
                                    })
                                }
                                Image(systemName: "ellipsis").foregroundColor(needChangeColor ? .gray : .white)
                                    .onTapGesture {
                                        isPresented.toggle()
                                    }
                            }
                        }
                        ToolbarItem(placement:.bottomBar){
                            HStack{
                                Image(systemName: "star")
                                Text("3.6万")
                                Spacer()
                                Image(systemName: "message")
                                Text("209")
                                Spacer()
                                Image(systemName: "camera")
                                Text("交作业")
                                TextField(
                                      "说点什么...",
                                      text: $comment
                                )
                                .focused($isTextFieldFocused) // 绑定焦点状态
                                .textFieldStyle(RoundedBorderTextFieldStyle())
                                .background(.gray.opacity(0.1))
                                .cornerRadius(30)
                            }
                            .foregroundColor(.black.opacity(0.8))
                            .font(.caption)
                            
                        }
                        
                    }
                    .gesture(DragGesture().onEnded({value in
                        if value.translation.width > 100 {
                            self.presentationMode.wrappedValue.dismiss()
                        }
                    }))
                }.edgesIgnoringSafeArea(.top)
        }
    }
}

#Preview {
    CookbookDetails()
}
